<template>
  <div class="home">
    <div class="home-left">
      <div style="width: 100%; display: flex">
        <!-- 库存容量 -->
        <a-card style="width: 33%; height: 250px">
          <HeaderTitle title="库存容量"></HeaderTitle>
          <div style="display: flex; justify-content: space-around">
            <div class="pie" style="width: 40%">
              <div id="pie" style="display: flex; justify-content: center">
                <HomePie style="height: 130px; width: 120px; margin: 0 auto" :allCount="state.pie.allCount"
                  :number="state.pie.number" :percent="state.pie.percent"></HomePie>
              </div>
            </div>
          </div>
          <p><span class="hui"></span>全部 : {{ state.pie.allCount }}</p>
          <p><span class="lan"></span>已使用 : {{ state.pie.number }}</p>
        </a-card>
        <!-- 库存统计 -->
        <a-card style="margin-left: 20px; width: 65%; height: 250px">
          <HeaderTitle title="库存统计"></HeaderTitle>
          <div style="height: 200px; width: 100%">
            <HomeLine style="height: 200px" :x-axis="state.line.xAxis" :data="state.line.data"></HomeLine>
          </div>
        </a-card>
      </div>

      <!-- 设备预览 -->
      <a-card style="margin-top: 20px; width: 100%; height: 600px; overflow: auto">
        <HeaderTitle title="设备报警"></HeaderTitle>
        <div>
          <overview v-for="(item, index) in state.warnData" :key="index" :temperature="item" :showwarn="state.showwarn">
          </overview>
        </div>
        <HeaderTitle title="设备预览"></HeaderTitle>
        <div>
          <overview v-for="(item, index) in state.result" :key="index" :temperature="item" :showwarn="state.showwarn">
          </overview>
        </div>
      </a-card>
    </div>
    <div class="home-right">
      <!-- 预警信息 -->
      <a-card>
        <HeaderTitle title="预警信息"></HeaderTitle>
        <EnvWarnCard :result="state.earlyWarning" :isshow="true" />
      </a-card>
      <!-- 样本信息 -->
      <a-card style="margin-top: 10px; height: 290px;width: 100%;">
        <HeaderTitle title="样本信息"></HeaderTitle>
        <PeopleWarnCard style="width:100%" :result="state.information" />
      </a-card>
      <!-- 操作记录 -->
      <a-card style="margin-top: 10px; height: 250px" id="warn-card">
        <HeaderTitle title="操作记录"></HeaderTitle>
        <EnvWarnCard :takeNotes="state.takeNotes" />
      </a-card>
    </div>
  </div>
</template>

<script setup lang="tsx">
import HeaderTitle from '@/components/headerTitle.vue';
import { reactive, onMounted } from 'vue';
import HomePie from './components/homePie.vue';
import HomeLine from './components/homeLine.vue';
import EnvWarnCard from './components/envWarnCard.vue';
import PeopleWarnCard from './components/peopleWarnCard.vue';
import overview from './components/overview.vue';
import _ from 'lodash-es';
// import dayjs, { Dayjs } from 'dayjs';
// import { useUserStore } from '@/store/modules/user';
// import { useRouter } from 'vue-router';
import { journalSearch, getVolume, getStatistics, getinformation, getIceBox, getWarnData } from '@/api/home/index';
// const userStore = useUserStore();
// const router = useRouter();
// const LEVEL = userStore.getOrganizationInfo?.level;

const state = reactive({
  pie: {
    allCount: 0, // 总数
    number: 0, // 已接入
    percent: 0,
    show: true,
  },
  line: {
    xAxis: [] as string[],
    data: [] as number[],
  },
  information: [],
  takeNotes: [],
  warnData: [],
  result: [],
  earlyWarning: {},
  warn: false,
  showwarn: false,
});
let journalObj = {
  1003: '样本出库',
  1004: '提醒处理',
  1005: '样本入库',
  1006: '样本移库',
  1007: `123`,
  1008: '样本核销',
};
const getJournalSearch = async () => {
  let queryOpt = {
    pageNum: 1, // 当前页数
    pageSize: 9, // 页面大小
    'orderBy[0].field': 'createTime', // 默认排序字段
    'orderBy[0].order': 'desc', // 默认排序方式
  };
  let queryParam = {};
  const { result } = await journalSearch(queryOpt, queryParam);
  let tempList: any = [];
  result.data.forEach(function (value) {
    tempList.push({
      createTime: value.createTime.substring(0, 11),
      hour: value.createTime.substring(10, 19),
      creatorId: value.creatorId,
      opt: journalObj[value.optCode],
      count: (value.count ? value.count : 0) + '支',
    });
  });
  state.takeNotes = tempList;
};
// 库存容量
const getHomePie = async () => {
  let { result } = await getVolume();
  state.pie.number = result.usedCount;
  state.pie.allCount = result.capacity;
  state.pie.percent = result.mix;
};
// 库存统计
const Statistics = async () => {
  let { result } = await getStatistics();
  let enumeratio = {
    '01': '1月',
    '02': '2月',
    '03': '3月',
    '04': '4月',
    '05': '5月',
    '06': '6月',
    '07': '7月',
    '08': '8月',
    '09': '9月',
    '10': '10月',
    '11': '11月',
    '12': '12月',
  };
  result.forEach((item) => {
    state.line.xAxis.push(enumeratio[item.month]);
    state.line.data.push(item.count);
  });
};
// 样本信息
const getoutPie = async () => {
  let { result } = await getinformation();
  state.information = result;
};
//温度数据处理
const dataHandling = async () => {
  let { result } = await getIceBox();
  state.warnData = _.cloneDeep(result);
  state.result = result;
  result.forEach((item, index) => {
    state.warnData[index].storageIceStatisticVoList = [];
    state.warnData[index].storageIceStatisticVoList = item.storageIceStatisticVoList.filter((ul) => ul.deviceWarnVo && ul.deviceWarnVo.status != 0);
    state.warnData[index].storageIceStatisticVoList.length > 0 ? (state.warn = true) : '';
  });
  for (let i = state.warnData.length - 1; i >= 0; i--) {
    if (state.warnData[i].storageIceStatisticVoList.length == 0) {
      state.warnData.splice(i, 1);
    }
  }
  // state.warnheight = 250 + 210 * (state.warnData.length - 1) + 'px'
  // state.overviewHeight = 250 + 210 * (result.length - 1) + 'px'
  setInterval(() => {
    state.showwarn = !state.showwarn;
  }, 1000);
};
//预警信息
const warnInfo = async () => {
  let { result } = await getWarnData()
  state.earlyWarning = result
}
onMounted(async () => {
  try {
    await Promise.all([getJournalSearch(), getHomePie(), Statistics(), getoutPie(), dataHandling(), warnInfo()]);
  } finally {
  }
});
</script>

<style lang="less" scoped>
.bluebox {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #3756ff;
  border-radius: 2px;
}

.hui {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #b1b0b0;
  border-radius: 5px;
  margin-right: 5px;
}

.lan {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #2d8bf0;
  border-radius: 5px;
  margin-right: 5px;
}

.text-btn {
  color: #3b6aff;
  cursor: pointer;
}

.text-num {
  color: #1f59f7;
  font-size: 18px;
  margin: 0 5px;
}

.text-small {
  font-size: 12px;
  margin-left: 10px;
}

.text-warn {
  font-size: 18px;
  color: #ff0000;
  font-weight: bold;
}

.home {
  display: flex;
  width: 100%;
  justify-content: space-between;

  &-left {
    width: 70%;
    // display: flex;
    margin-right: 20px;
    // flex-wrap: wrap;
  }

  &-right {
    width: 29%;
  }
}

:deep(.ant-card-body) {
  padding: 15px;
}
</style>
